<template>
  <div class="device-state">
    <div class="search">
      <el-form :inline="true">
        <el-form-item label="设备编号：">
          <el-input v-model="innerCode" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="resultinfo">
      <DeviceStateTable
        v-loading="loading"
        :currentPageRecords="currentPageRecords"
        @lookStateInfo="lookStateInfo"
      />
    </div>
    <MyPagination
      :page="page"
      :sumIndex="sumIndex"
      @updateIndex="updateIndex"
    />
    <DeviceStateInfo ref="DeviceStateInfo" :visible.sync="visible" />
  </div>
</template>

<script>
import DeviceStateInfo from './components/DeviceStateInfo.vue'
import DeviceStateTable from './components/DeviceStateTable.vue'
import { getVmSearch } from '@/api/device-manager'
export default {
  name: 'DeviceState',
  components: { DeviceStateTable, DeviceStateInfo },
  data () {
    return {
      innerCode: '',
      page: {
        pageIndex: 1,
        pageSize: 10,
        totalCount: 0
      },
      currentPageRecords: [],
      visible: false,
      loading: false
    }
  },
  created () {
    this.getDeviceStateList()
  },
  computed: {
    // 分页总页数
    sumIndex () {
      return Math.ceil(this.page.totalCount / this.page.pageSize)
    }
  },
  methods: {
    // 渲染
    async getDeviceStateList () {
      this.loading = true
      const { currentPageRecords, totalCount } = await getVmSearch(this.page)
      this.currentPageRecords = currentPageRecords
      this.page.totalCount = totalCount
      this.loading = false
    },
    // 搜索
    async onSubmit () {
      const { totalCount, currentPageRecords } = await getVmSearch({
        ...this.page,
        innerCode: this.innerCode
      })
      this.page.totalCount = totalCount
      this.currentPageRecords = currentPageRecords
    },
    // 分页
    updateIndex (val) {
      this.page.pageIndex += val
      this.getDeviceStateList()
    },
    // 查看详情
    lookStateInfo (row) {
      this.visible = true
      this.$refs.DeviceStateInfo.StateInfo = row
    }
  }
}
</script>

<style lang="scss" scoped>
  .search {
    height: 64px;
    margin-bottom: 20px;
    padding-left: 17px;
    background-color: #fff;
    .el-form {
      padding-top: 12px;
      ::v-deep .el-form-item__label {
        font-weight: normal;
      }
      .el-button--primary {
        background-color: rgb(95, 132, 255);
        border: 0;
      }
    }
  }
  .resultinfo {
    background-color: #fff;
    padding: 20px 15px 19px 17px;
  }
</style>
